<template>
   <div>
       <top-simple-search @searchFun="toSearch" >
           <el-button type="primary" @click="toAdd" size="mini" slot="other-button">新增</el-button>
       </top-simple-search>
        <simple-table ref="myTable" api-url="addressBook/group">
            <el-table-column align="left" prop="name" label="名称"/>
            <el-table-column align="left" prop="no_order" label="排序"/>
            <el-table-column align="left" prop="num" label="人数"/>
            <el-table-column align="left" label="操作">
                <template slot-scope="{row}">
                    <my-button @click="toDetail(row)" size="mini" handle="Retrieve">查看</my-button>
                    <my-button @click="toEdit(row)" size="mini" handle="Retrieve">编辑</my-button>
                    <my-button @click="toDelete(row.id)" size="mini" handle="Retrieve">删除</my-button>
                    <my-button @click="showUserListDialog(row)" handle="Retrieve">查看用户</my-button>
                </template>
            </el-table-column>
        </simple-table>
        <detail-dialog :visible.sync="visible" v-if="visible" @reloadList="getList" :row="currRow" :disabled="disabled"></detail-dialog>
       <group-user-list-dialog
               :visible.sync="roleUsersVisible"
               :id="currRow.id"
               v-if="roleUsersVisible"
       ></group-user-list-dialog>
   </div>
</template>
<script>
    import DetailDialog from "./GroupDialog";
    import simpleTable from "@/mixins/SimpleTable";
    import XEUtils from "xe-utils";
    import GroupUserListDialog from "./GroupUserListDialog";
    import eventBus from "../../utils/eventBus";
    export default {
        name:"MyGroup",
        mixins:[simpleTable],
        components: {GroupUserListDialog, DetailDialog},
        data(){
            return{
                roleUsersVisible:false,
                apiUrl:"group"
            }
        },
        created() {
            eventBus.$on("reloadGroupsList", () => {
                this.getList();
            });
        },
        methods:{
            toSearch(params){
                this.getList(params)
            },
            showUserListDialog(row) {
                this.roleUsersVisible = true;
                this.currRow = row;
            },
        }
    }
</script>
